<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩录入表</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">录入新客户</h4>
                        <!-- 表单 -->
                        <form action="" method="post">
                            <div class="form-group">
                                <label for="usename">姓名</label>
                                <input type="text" class="form-control" name="" id="usename" aria-describedby="helpId"
                                    placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="iphone">手机号</label>
                                <input type="text" class="form-control" name="" id="iphone" aria-describedby="helpId"
                                    placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="addre">地址</label>
                                <input type="text" class="form-control" name="" id="addre" aria-describedby="helpId"
                                    placeholder="">
                            </div>
                            <!--  -->
                            <button type="button" name="" id="btn" onclick="add()"
                                class="btn btn-success btn-block">录入</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <!-- 删除选中 -->
                <button type="button" class="btn btn-danger my-3" onclick="del(event)">删除</button>
                <!-- 表格 -->
                <table class="table table-bordered text-center">
                    <thead class="thead-dark">
                        <tr>
                            <th>
                                <input type="checkbox" name="all" onclick="selectAll(event)">全选
                            </th>
                            <th scope="col">姓名</th>
                            <th scope="col">手机号</th>
                            <th scope="col">地址</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <script>
        let list = [];
        const btn = document.querySelector('#btn');
        const input1 = document.querySelector('#usename');
        const input2 = document.querySelector('#iphone');
        const input3 = document.querySelector('#addre');


        // 添加功能
        function add(e) {
            console.log(1);
            list.push({ id: Date.now().toString(), usename: input1.value, iphone: input2.value, addre: input3.value });

            input1.value = '';
            input2.value = '';
            input3.value = '';

            render(list)
        }

        // 页面渲染
        function render(_list) {
            const tb = document.querySelector('tbody');
            // 每次重新渲染先清空
            tb.innerHTML = '';

            _list.reduce((acc, item) => {
                const tr = document.createElement('tr');
                const td1 = document.createElement('td');
                const td2 = document.createElement('td');
                const td3 = document.createElement('td');
                const td = document.createElement('td');
                const input = document.createElement('input');

                input.setAttribute('type', 'checkbox');
                input.setAttribute('name', 'ipt');
                // 优化，如果全选是勾选状态，那么新加的都会是勾选状态
                input.checked = document.querySelector('input[name="all"]').checked;
                input.addEventListener('change', select);

                td1.innerText = item.usename;
                td2.innerText = item.iphone;
                td3.innerText = item.addre;
                input.value = item.id;


                td.append(input);
                tr.append(td, td1, td2, td3);
                tb.appendChild(tr);

                return acc;
            }, tb)
        }

        // 全选功能
        function selectAll(e) {
            const inputs = document.querySelectorAll('input[name="ipt"');

            inputs.forEach(item => item.checked = e.target.checked)
        }

        // 全选优化功能
        // 如果有一个子选项没有勾选，那么全选则不会勾选
        function select(e) {
            let checkboxeAll = document.querySelector('input[name="all"]');
            let checkboxes = document.querySelectorAll('input[name="ipt"]');

            let selectedTotal = [...checkboxes].reduce((acc, checkbox) => acc = acc + (checkbox.checked ? 1 : 0)
                , 0);

            checkboxeAll.checked = checkboxes.length == selectedTotal;

        }



        // 删除功能
        function del(e) {
            const inputs = document.querySelectorAll('input[name="ipt"');

            inputs.forEach(item => {
                if (item.checked) {
                    list.splice(list.findIndex(x => x.id == item.value), 1);
                    render(list)
                }
            });

            // console.log(e.target);

        }
    </script>
</body>

</html>